import { useEffect, useState } from "react";
import axios from "../../axios";
import "../../assets/css/Console.scss"
import AutoChart from "../../components/AutoChart"
import { Col, Flex, Row, Divider, Badge, Radio, Table, Button, DatePicker } from 'antd';
const { RangePicker } = DatePicker;

import * as  echarts from 'echarts';
import ChinaMap from "../../components/chinaMap/index";
function Console() {
    // 销售额  用户访问  订单量  新增用户  请求——————————————————————
    const getsales = async () => {
        localStorage.getItem("token")
        let res = await axios.get("/statistics/user/total/data", {
            params: {
                temp: new Date().getTime()
            }
        })
  
        setsales(res)
    }
    const [sales, setsales] = useState({})
    const [operating, setoperating] = useState({})
    // 经营数据开始了------------------------------
    const getoperating = async () => {
        let res = await axios.get("/statistics/home/operating/data", {
            params: {
                temp: new Date().getTime()
            }
        })
        setoperating(res)
    }

    // 订单统计 开始了***************************************
    const [day, setDay] = useState('yesterday');//天数切换效果

    const [dayobj, setDayobj] = useState({})

    const getStatistics = async (dateLimit) => {
        let res = await axios.get("/statistics/user/overview", {
            params: {
                dateLimit,
                temp: new Date().getTime()
            }
        })
        // console.log(res);
        setDayobj(res)
    }
    const onChange = (e) => {

        setDay(e.target.value);

        getStatistics(e.target.value)
    };
    const [placement, setPlacement] = useState('');
    const onChangetime = (e) => {
        if (!e) {
            setPlacement("")
            return false
        }
        const startTime = `${e[0].$y}-${(e[0].$M + 1) < 10 ? "0" + (e[0].$M + 1) : (e[0].$M + 1)}-${(e[0].$D) < 10 ? "0" + (e[0].$D) : (e[0].$D)}`;
        const endTime = `${e[1].$y}-${(e[1].$M + 1) < 10 ? "0" + (e[1].$M + 1) : (e[1].$M + 1)}-${(e[1].$D) < 10 ? "0" + (e[1].$D) : (e[1].$D)}`;
        // console.log(`${e[1].$y}-${(e[1].$M+1}-${e[1].$D}`);

        setPlacement(`${startTime},${endTime}`);
        // getStatistics(`${startTime},${endTime}`)
    };
    const searchTime = () => {
        if (placement !== "") {

            getStatistics(placement)
        }
    }
    // 订单统计 end***************************************


    const [timeval, setTimeval] = useState("day")
    const [option, setOption] = useState({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '2%',
            orient: 'vertical',
            right: 'right'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    // { value: 1048, name: 'H5' },
                    // { value: 735, name: 'app' },
                    // { value: 580, name: '小程序' },
                ]
            }
        ]
    })
    const getOption = async () => {

        let res = await axios.get("/statistics/user/channel", {
            params: {
                temp: new Date().getTime()
            }

        })
        const data = []
        res.map(item => {
            data.push({
                value: item.num,
                name: item.channel
            })
            setOption(pre => {
                // console.log(pre);
                pre.series[0].data = data
                return { ...pre }
            })
        })
    }
    // ***************************************************************222222222222222222222222


    const dataList = [
        {
            "area": "山东",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "福建",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "台湾",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "河北",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "河南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "重庆",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "湖北",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "湖南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "江西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "海南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "黑龙江",
            "userNum": 88,
            "payUserNum": 99,
            "payAmount": "120.00"
        },
        {
            "area": "天津",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "贵州",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "陕西",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "新疆",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "澳门",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "江苏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "安徽",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "西藏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "吉林",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "上海",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "山西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "甘肃",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "宁夏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "香港",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "四川",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "其他",
            "userNum": 2332,
            "payUserNum": 79,
            "payAmount": "1071898.16"
        },
        {
            "area": "浙江",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "广西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "云南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "内蒙古",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "辽宁",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "广东",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "青海",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "北京",
            "userNum": 1,
            "payUserNum": 1,
            "payAmount": "5590.51"
        },
    ];
    const option2 = {
        title: {
            text: "数据地图",
            // subtext: "数据来源于阿里云平台",
            // sublink: "https://datav.aliyun.com/portal/school/atlas/area_selector",
            left: "right",
            textStyle: {
                color: "#000",
            },
        },
        // 提示框
        tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: (params) => {
                let obj = {}
                // "area": "山东",
                // "userNum": 0,
                // "payUserNum": 0,
                // "payAmount": "0.00"
                dataList.map(item => {
                    if (params.name.includes(item.area)) {
                        obj = item
                    }
                })
                return `
              <div>
                <p>地区:${obj.area}</p>
                <p>支付金额:${obj.payAmount}</p>
                <p>成交用户数量: ${obj.payUserNum}</p>
                <p>累计用户数量:${obj.userNum}</p>
              </div>
            `;
            },
        },
        // 工具导航

        // 地图数据
        dataset: {
            source: dataList,
        },
        series: {
            type: "map",
            map: "china",
            //   roam: true, // 地图拖动、缩放
            top: "10%", // 距离顶部距离
            zoom: 1.2, // 当前视角的缩放比例
            scaleLimit: {
                max: 2,
                min: 1, // 设置默认缩放效果
            },
            // 文本标签，地区名, 控制样式，位置等等，可以是数组，多个
            label: {
                show: true, // 默认状态下，显示省市名称
                position: [1, 100], // 相对的百分比
                fontSize: 10,
                offset: [2, 0],
                align: "left",
            },
            itemStyle: {
                areaColor: "#e5f7ff", // 地图图形颜色 #fff
                // borderColor: "#a0d4e7", // 地图边框线色
                // borderWidth: 1, // 地图边框线宽
            },
            // 高亮状态下的多边形和文本样式，鼠标悬浮在地图块上的效果
            emphasis: {
                itemStyle: {
                    areaColor: "#ccc",
                    borderColor: "#4aacd9",
                },
            },
        },
    }


    // 表格
    const [areas, setArea] = useState([])
    //请求省份
    const getArea = async () => {
        let res = await axios.get("statistics/user/area", {
            params: {
                temp: new Date().getTime()
            }
        })
        setArea(res)
        // console.log(areas);
    }
    const columns = [

        {
            title: ' 省份',
            dataIndex: 'area',
            key:"area",
            sorter: (a, b) => a.area.length - b.area.length,
        },
        {
            title: '交易金额',
            dataIndex: 'payAmount',
            key:"payAmount",
            sorter: (a, b) => a.payAmount - b.payAmount,
        },
        {
            title: ' 成交用户数量',
            dataIndex: 'payUserNum',
            key: 'payUserNum',
            sorter: (a, b) => a.payUserNum - b.payUserNum,
        },
        {
            title: ' 累计用户数量',
            dataIndex: 'userNum',
            key: 'userNum',
            sorter: (a, b) => a.userNum - b.userNum,
        },
    ];
    // const data2 = [
    //     {
    //         key: '1',
    //         areass: areas.ar ea,
    //         payment: areas.payAmount,
    //         deal: areas.payUserNum,
    //         add:areas.userNum
    //     },
    // ];
    const onChange2 = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    //性别请求
    const [sex, setSex] = useState([])

    const [option3,setOption3] =useState( {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: "right"
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    //   { 
                    //     value:11,
                    //     name:"未知"
                    //  },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });
    const getsex = async () => {
        let res = await axios.get("/statistics/user/sex", {
            params: {
                temp: new Date().getTime()
            }
        })
        const arry=[]
        res.map(item=>{
            
            arry.push({
                name:(item.sex==0?"女":"男"),
                value:item.num
            })
        })
        setOption3(pre=>{
            console.log(pre);
            pre.series[0].data=arry
            return{...pre}
        })
    }


    useEffect(() => {
        getsales()// 
        getoperating()//经营数据

        getStatistics(day)// 三角
        getOption()
        getArea()
        getsex()
    }, [])


const [pageSize,setPagesize]=useState(10)




    return (
        <>
            <Row gutter={20}>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div className="pic pic2">图标</div>
                            <div>
                                <div>累计用户数</div>
                                <h2>{sales.userNum}</h2>
                            </div>
                        </Flex>


                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div className="pic pic2">图标</div>
                            <div>
                                <div>累计橙充值人数</div>
                                <h2>{sales.rechargePeopleNum}</h2>
                            </div>
                        </Flex>
                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div className="pic pic2">图标</div>
                            <div>
                                <div>累计充值金额</div>
                                <h2>{sales.rechargeTotalAmount}</h2>
                            </div>
                        </Flex>
                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div className="pic pic2">图标</div>
                            <div>
                                <div>累计消费金额</div>

                                <h2>{sales.consumptionAmount}</h2>
                            </div>
                        </Flex>
                    </Flex>
                </Col>
            </Row>
            <Row gutter={20}>
                <Col className="colbottom" xs={24} sm={24} md={24} lg={24} xl={18}>
                    <section className="whitebg">
                        <Flex justify="space-between">
                            <h3>订单统计</h3>
                            <Radio.Group
                                value={day}
                                onChange={onChange}
                                style={{
                                    marginBottom: 16,
                                }}
                            >
                                <Radio.Button value="yesterday">昨天</Radio.Button>
                                <Radio.Button value="lately7">近七天</Radio.Button>
                                <Radio.Button value="lately30">近30天</Radio.Button>
                            </Radio.Group>

                            <RangePicker onChange={(e) => onChangetime(e)} />

                            <Button onClick={() => searchTime()} type="primary">搜索</Button>

                        </Flex>

                        <Flex>
                            <div>
                                <p>注册</p>
                                {/* <p>{dayobj.registerNumRatio}</p> */}
                                <div className="box1">
                                    <div>
                                        <section>  注册用户数量:{dayobj.registerNum}</section>
                                        <section> 环比增长率：{dayobj.registerNumRatio}</section>
                                    </div>
                                    <div className="one column_center">
                                        <div>{dayobj.pageviews}</div>
                                        <div>访客</div>
                                    </div>
                                </div>
                                <div className="box2">
                                    <div>
                                        <section>  活跃用户数量:{dayobj.activeUserNum}</section>
                                        <section> 环比增长率：{dayobj.activeUserNumRatio}</section>
                                    </div>
                                    <div className="two column_center">
                                        <div>{dayobj.orderUserNum}</div>
                                        <div>下单</div>
                                    </div>
                                </div>
                                <div className="box3">
                                    <div className="between">
                                        <div>
                                            <section>  充值用户数量:{dayobj.rechargeUserNum}</section>
                                            <section> 环比增长率：{dayobj.rechargeUserNumRatio}</section>
                                        </div>
                                        <div>
                                            客单价：{dayobj.payOrderAmount}
                                        </div>
                                    </div>
                                    <div className=" three column_center">
                                        <div>{dayobj.orderPayUserNum}
                                            <div>成交用户</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Flex>
                    </section>

                </Col>
                <Col className="colbottom" xs={24} sm={24} md={24} lg={24} xl={6}>
                    <section className="whitebg" style={{ height: "400px" }}>
                        用户统计
                        <AutoChart option={option}></AutoChart>
                    </section>

                </Col>
            </Row>
            <Row gutter={20}>
                <Col xs={24} sm={24} md={24} lg={24} xl={18}>
                    <section className="whitebg">

                        <Row>
                            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                                <ChinaMap option={option2} height="50vh" width="100%" />
                            </Col>

                            <Col xs={24} sm={24} md={16} lg={16} xl={16}>

                                <Table rowKey="area" columns={columns} dataSource={areas} onChange={onChange2}
                                    pagination={{
                                        defaultCurrent: 3,
                                        total: areas.length,
                                        showQuickJumper: true,
                                        pageSize
                                    }}
                                >

                                </Table>
                            </Col>
                        </Row>
                    </section>
                </Col>
                <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                    <section  className="whitebg">
                        <AutoChart  option={option3}></AutoChart>
                    </section>
                </Col>
            </Row >
        </>

    );
}

export default Console;